<template>
    <div class="table-page">
        <div
            class="table-search-box"
            @keyup.enter="beforeSearch()"
        >
            <div class="search-item">
                <label>试题归属：</label>
                <div class="table-query-input" style="width: 120px">
                    <el-select
                        v-model="queryData.resourceType"
                        clearable
                        filterable
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in resourceTypeOptions"
                            :key="'i' + item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </div>
                <label>科目：</label>
                <div class="table-query-input">
                    <category-select
                        v-model="queryData.categoryId"
                        :category-id.sync="queryData.categoryId"
                        :props="{}"
                    />
                </div>
                <label v-if="queryData.resourceType === 'chapter'">章节：</label>
                <div v-if="queryData.resourceType === 'chapter'" class="table-query-input">
                    <chapter-select
                        :category-id="searchCategoryId"
                        :chapter-id.sync="queryData.chapterId"
                        :props="{}"
                    />
                </div>
                <label v-if="queryData.resourceType === 'paper'">试卷：</label>
                <div v-if="queryData.resourceType === 'paper'" class="table-query-input">
                    <el-select
                        v-model="queryData.paperId"
                        clearable
                        filterable
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in paperOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <!--                <label>题目内容：</label>
                                <div class="table-query-input">
                                    <el-input
                                        v-model="queryData.searchKey"
                                        class="test"
                                        clearable
                                        placeholder="题目内容"
                                    ></el-input>
                                </div>-->
                <label>难度：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.difficulty"
                        clearable
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in difficultyOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </div>
                <label>题型：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.firstType"
                        placeholder="请选择"
                        clearable
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                    <!--                    <el-cascader
                                            ref="questionType"
                                            :key="zeroOne"
                                            v-model="questionType"
                                            :props="questionTypeProps"
                                            :show-all-levels="false"
                                            filterable
                                            clearable
                                        ></el-cascader>-->
                </div>
                <div class="table-query-input"></div>
            </div>

            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="beforeSearch"
                >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                >重置
                </el-button>
            </div>
        </div>
        <div class="table-operation-box">
            <el-button
                type="danger"
                icon="el-icon-delete"
                style="margin-bottom: 2em"
                :disabled="ids.length === 0"
                @click="
                    tableDelete(
                        '/exam/question/deleted-list',
                        {
                            ids: ids
                        },
                        true
                    )
                "
            >批量删除
            </el-button>
            <el-button
                type="primary"
                icon="el-icon-unlock"
                style="margin-bottom: 2em"
                :disabled="ids.length === 0"
                @click="
                    hideList(
                        `公开`,
                        {
                            ids: ids,
                            isHide: false
                        },
                        true
                    )
                "
            >批量公开
            </el-button>
            <el-button
                type="warning"
                icon="el-icon-lock"
                style="margin-bottom: 2em"
                :disabled="ids.length === 0"
                @click="
                    hideList(
                        `隐藏`,
                        {
                            ids: ids,
                            isHide: true
                        },
                        true
                    )
                "
            >批量隐藏
            </el-button>
        </div>
        <div class="table-data-box">
            <!--        row-key="id"-->
            <el-table
                ref="table"

                v-loading="tableLoading"
                border
                :data="tableData"
                style="width: 100%;min-height:40em"
                :highlight-current-row="true"
                @selection-change="handleSelectionChange"
            >
                <el-table-column
                    type="selection"
                    min-width="55"
                    align="center"
                    :resizable="false"
                >
                </el-table-column>
                <el-table-column
                    type="index"
                    :index="indexMethod"
                    min-width="55"
                    align="center"
                    :resizable="false"
                >
                </el-table-column>
                <el-table-column
                    prop="remark"
                    label="试题内容"
                    :resizable="false"
                >
                    <template slot-scope="scope">
                        <div>
                            <p v-if="scope.row.isHide" style="color: red">
                                【状态】隐藏
                            </p>
                            <p v-else style="color: green">【状态】公开</p>
                        </div>
                        <div>
                            【难度】{{ difficulty[scope.row.difficulty] }}
                        </div>
                        <div>【题型】{{ status[scope.row.firstType] }}</div>
                        <div class="questionInfo">
                            【题干】
                            <div v-if="scope.row.stem.length > 0">
                                <p v-for="(op,inx) in scope.row.stem" :key="inx">
                                    <img v-if="op.tp ==='img'"
                                         :src="'https://vipcdn.langrundata.com/'+op.vl"
                                         alt="" width="80"/>
                                    <audio v-else-if="op.tp === 'audio'"
                                           :src="'https://vipcdn.langrundata.com/'+op.vl"
                                           controls="controls"></audio>
                                    <span v-else v-html="op.vl">{{ op.vl }}</span>
                                </p>
                            </div>
                            <p v-else v-html="scope.row.stem ? scope.row.stem[0].vl : '-'"></p>
                        </div>
                        <div v-if="status[scope.row.firstType] === '单选题' ||status[scope.row.firstType] === '多选题' || status[scope.row.firstType] === '不定项选择题' "
                             class="qu-item">
                            <div
                                v-for="(item, index) in scope.row.quOption"
                                :key="index"
                                class="questionInfo">
                                {{ item.option }}、
                                <div v-if="item.content.length > 0">
                                    <p v-for="(op,inx) in item.content" :key="inx">
                                        <img v-if="op.tp === 'img'"
                                             :src="'https://vipcdn.langrundata.com/'+op.vl"
                                             alt="" width="80"/>
                                        <audio v-else-if="op.tp ==='audio'"
                                               :src="'https://vipcdn.langrundata.com/'+op.vl"
                                               controls="controls"></audio>
                                        <span v-else v-html="op.vl">{{ op.vl }}</span>
                                    </p>
                                </div>
                                <p v-else v-html="item.content ? item.content[0].vl : '-'"></p>
                            </div>
                        </div>
                        <div v-if="status[scope.row.firstType] !== '组合题'">
                            <div class="questionInfo">
                                <div v-if="status[scope.row.firstType] === '单选题'">
                                    【正确答案】{{ scope.row.answer ? scope.row.answer : "--" }}
                                </div>
                                <div v-if="status[scope.row.firstType] === '多选题'">
                                    【正确答案】
                                    <span v-if="scope.row.answer === null">
                                        --
                                    </span>
                                    <span v-for="(m,indexm) in scope.row.answer" v-else :key="indexm">
                                        {{ m }}
                                    </span>
                                </div>
                                <div v-if="status[scope.row.firstType] === '填空题' || status[scope.row.firstType] === '问答题'" class="flexdiv">
                                    【正确答案】
                                    <span v-if="scope.row.answer === undefined || scope.row.answer === null">--</span>
                                    <div v-for="(singleItem,indexVl) in scope.row.answer" v-else :key="indexVl">
                                        <p v-for="(fia,fin) in singleItem.vl " :key="fin">
                                            <img v-if="fia.tp === 'img'"
                                                 :src="'https://vipcdn.langrundata.com/'+fia.vl"
                                                 alt="" width="80"/>
                                            <audio v-else-if="fia.tp ==='audio'"
                                                   :src="'https://vipcdn.langrundata.com/'+fia.vl"
                                                   controls="controls"></audio>
                                            <span v-else v-html="fia.vl">{{ fia.vl }}</span>
                                        </p>
                                        <p v-if="indexVl !== scope.row.answer.length-1">,</p>
                                    </div>
                                </div>
                                <div v-if="status[scope.row.firstType] === '判断题'">
                                    【正确答案】<span>{{ scope.row.answer === 1 ? "正确" : "错误" }}</span>
                                </div>
                            </div>
                            <div class="questionInfo">
                                <span>【试题解析】</span>
                                <div v-if="scope.row.answerDesc.length > 0">
                                    <p v-for="(op,inx) in scope.row.answerDesc" :key="inx">
                                        <img v-if="op.tp ==='img'"
                                             :src="'https://vipcdn.langrundata.com/'+op.vl"
                                             alt="" width="80"/>
                                        <audio v-else-if="op.tp === 'audio'"
                                               :src="'https://vipcdn.langrundata.com/'+op.vl"
                                               controls="controls"></audio>
                                        <span v-else v-html="op.vl">{{ op.vl }}</span>
                                    </p>
                                </div>
                                <p v-else v-html="scope.row.answerDesc ? scope.row.answerDesc[0].vl : '-'"></p>
                            </div>
                        </div>
                        <div v-if="status[scope.row.firstType] === '组合题'">
                            <hr style="border:1px dotted #48c4ff; height:1px">
                            <div v-for="(item, index) in scope.row.children" :key="index" style="display: flex">
                                <div>
                                    <span>{{ index + 1 }})、</span>
                                </div>
                                <div>
                                    <div>【题型】{{ status[item.firstType] }}</div>
                                    <div>【难度】{{ difficulty[item.difficulty] }}</div>
                                    <div class="questionInfo">
                                        【题干】
                                        <div v-if="item.stem.length > 0">
                                            <p v-for="(op,inx) in item.stem" :key="inx">
                                                <img v-if="op.tp === 'img'"
                                                     :src="'https://vipcdn.langrundata.com/'+op.vl"
                                                     alt="" width="80"/>
                                                <audio v-else-if="op.tp ==='audio'"
                                                       :src="'https://vipcdn.langrundata.com/'+op.vl"
                                                       controls="controls"></audio>
                                                <span v-else v-html="op.vl">{{ op.vl }}</span>
                                            </p>
                                        </div>
                                        <p v-else v-html="item.stem ? item.stem[0].vl : '-'"></p>
                                    </div>
                                    <div
                                        v-if="status[item.firstType] === '单选题' || status[item.firstType] === '多选题'"
                                        class="qu-item">
                                        <div
                                            v-for="(item1, index1) in item.quOption"
                                            :key="index1"
                                            class="questionInfo">
                                            {{ item1.option }}、
                                            <div v-if="item1.content.length > 0">
                                                <p v-for="(op,inx) in item1.content" :key="inx">
                                                    <img v-if="op.tp === 'img'"
                                                         :src="'https://vipcdn.langrundata.com/'+op.vl"
                                                         alt="" width="80"/>
                                                    <audio v-else-if="op.tp ==='audio'"
                                                           :src="'https://vipcdn.langrundata.com/'+op.vl"
                                                           controls="controls"></audio>
                                                    <span v-else v-html="op.vl">{{ op.vl }}</span>
                                                </p>
                                            </div>
                                            <p v-else v-html="item1.content ? item1.content[0].vl : '-'"></p>
                                        </div>
                                    </div>
                                    <div class="questionInfo">
                                        <div v-if="status[item.firstType] === '单选题'">
                                            【正确答案】{{ item.answer ? item.answer : "--" }}
                                        </div>
                                        <div v-if="status[item.firstType] === '多选题'">
                                            【正确答案】
                                            <span v-if="item.answer === null">--</span>
                                            <span v-for="(m,indexm) in item.answer" v-else :key="indexm">{{ m }}</span>
                                        </div>
                                        <div v-if="status[item.firstType] === '填空题' || status[item.firstType] === '问答题'"
                                            class="qu-item">
                                            【正确答案】
                                            <span v-if="item.answer === null">--</span>
                                            <div v-for="(answerItem,indexa) in item.answer" v-else :key="indexa">
                                                <p v-for="(fia,fin) in answerItem.vl " :key="fin">
                                                    <img v-if="fia.tp === 'img'"
                                                         :src="'https://vipcdn.langrundata.com/'+fia.vl"
                                                         alt="" width="80"/>
                                                    <audio v-else-if="fia.tp ==='audio'"
                                                           :src="'https://vipcdn.langrundata.com/'+fia.vl"
                                                           controls="controls"></audio>
                                                    <span v-else v-html="fia.vl">{{ fia.vl }}</span>
                                                </p>
                                                <p v-if="indexa !== item.answer.length-1">,</p>
                                            </div>
                                        </div>
                                        <div v-if="status[item.firstType] === '判断题'">
                                            【正确答案】<span>{{ item.answer === 1 ? "正确" : "错误" }}</span>
                                        </div>
                                    </div>
                                    <div class="questionInfo">
                                        <span>【试题解析】</span>
                                        <div v-if="item.answerDesc.length > 0">
                                            <p v-for="(op,inx) in item.answerDesc" :key="inx">
                                                <img v-if="op.tp ==='img'"
                                                     :src="'https://vipcdn.langrundata.com/'+op.vl"
                                                     alt="" width="80"/>
                                                <audio v-else-if="op.tp === 'audio'"
                                                       :src="'https://vipcdn.langrundata.com/'+op.vl"
                                                       controls="controls"></audio>
                                                <span v-else v-html="op.vl">{{ op.vl }}</span>
                                            </p>
                                        </div>
                                        <p v-else v-html="item.answerDesc ? item.answerDesc[0].vl : '-'"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="200"
                    align="center"
                    fixed="right"
                    :resizable="false"
                >
                    <template slot-scope="scope">
                        <el-button
                            class="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="canUpdate(scope.row)"
                        >编辑
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            class="danger"
                            type="text"
                            icon="el-icon-delete"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/exam/question/deleted-list',
                                    {
                                        ids: [scope.row.id]
                                    },
                                    true
                                )
                            "
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
        <!-- 试题弹出框 -->
        <add-question-box
            ref="addDialog"
            :question-type="addQuestionType"
            :q-type-array="qTypeNameArray"
            :edit-question-text="editQuestionText"
            @edit-qu-list="submitEditQuestion"
        ></add-question-box>

    </div>
</template>

<script>
import {TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {
    editQuestion,
    fetchChapterChildren,
    fetchChapterFirstStage,
    fetchPaper,
    fetchQuestionType
} from "@/api/exam";

import {
    fetchClassificationFirst,
    fetchClassificationChildren,
} from "@/api/course.js";
import {get, put} from "@/api/request";
import AddQuestionBox from "@/views/models/exam/questionBase/question/components/AddQuestionBox";
import CategorySelect from "@/components/CategorySelect";
import ChapterSelect from "@/components/ChapterSelect";
import {treeList2Tree} from "@/utils";

export default {
    name: "QuestionIndex",
    components: {AddQuestionBox, CategorySelect, ChapterSelect},
    mixins: [TablePage],
    data() {
        return {
            key: 0,
            classificationProps: {
                lazy: true,
                checkStrictly: true,
                lazyLoad: this.getSta,
                emitPath: false
            },
            zeroOne: 0,
            category: null,
            isShowEdit: false,
            options: [
                {
                    value: "singleChoice",
                    label: "单选题"
                },
                {
                    value: "multipleChoice",
                    label: "多选题"
                },
                {
                    value: "judgment",
                    label: "判断题"
                },
                {
                    value: "fill",
                    label: "填空题"
                },
                {
                    value: "text",
                    label: "问答题"
                },
                {
                    value: "combination",
                    label: "复合题"
                }
            ],
            difficultyOptions: [
                {
                    value: "easy",
                    label: "简单"
                },
                {
                    value: "normal",
                    label: "普通"
                },
                {
                    value: "difficult",
                    label: "困难"
                }
            ],
            resourceTypeOptions: [
                {
                    value: "paper",
                    label: "试卷"
                },
                {
                    value: "chapter",
                    label: "章节"
                }
            ],
            paperTypeOptions: [
                {
                    value: "chapterText",
                    label: "章节测试"
                },
                {
                    value: "finalExam",
                    label: "期末考试"
                },
                {
                    value: "normalExam",
                    label: "普通考试"
                }
            ],
            questionType: [],
            questionPaperId: null,
            paperType: null,
            queryData: {
                firstType: null,
                secondTypeId: null,
                difficulty: null,
                searchKey: null,
                resourceId: null,
                categoryId: null,
                chapterId: null,
                paperId: null,
                resourceType: "paper"
            },
            searchCategoryId: null,
            paperQueryData: {
                pageSize: 999,
                size:999,
                currentPage: 1
            },
            secondQueryData: {
                firstType: null
            },
            tableData: [],
            ids: [],
            paperOptions: [],
            examChapterProps: {
                lazy: true,
                checkStrictly: true,
                emitPath: false,
                lazyLoad: this.fetchExamChapter
            },
            questionTypeProps: {
                lazy: true,
                checkStrictly: true,
                lazyLoad: this.fetchQuestionType
            },
            editQuestionText: "编辑单选题",
            editQuListDialog: false,
            questionListForm: {},
            qTypeNameArray: [],
            addQuestionType: null
        };
    },
    computed: {
        ...mapState({
            status: state => state.status.questionFirstType,
            difficulty: state => state.status.questionDifficulty
        })
    },
    watch: {
        actionSearch(val) {
            this.$refs.tree.filter(val);
        },
        "queryData.categoryId"(val) {
            if (this.queryData.resourceType === "paper") {
                this.selectPaper(val)
            } else {
                this.searchCategoryId = val;
            }
        }
    },
    methods: {
        getSta(node, resolve) {
            const {level} = node;
            if (!node.data) {
                fetchClassificationFirst({
                    //   courseCategoryId: this.categoryId
                }).then(res => {
                    if (res !== null) {
                        const nodes = Array.from(res).map(item => {
                            return {
                                value: item.id,
                                label: `${item.name}`,
                                leaf:
                                    level >= (item.children.length > 0 ? 1 : 0)
                            };
                        });
                        resolve(nodes);
                    }
                });
            } else {
                fetchClassificationChildren({id: node.data.value}).then(
                    res => {
                        const nodes = Array.from(res).map(item => {
                            return {
                                value: item.id,
                                label: `${item.name}`,
                                leaf:
                                    level >=
                                    (item.children.length > 0 ? level + 1 : 0)
                            };
                        });
                        resolve(nodes);
                    }
                );
            }
        },
        beforeSearch() {
            this.search();
        },
        //编号
        indexMethod(index) {
            return (
                index +
                1 +
                (this.pageData.currentPage - 1) * this.pageData.pageSize
            );
        },
        //搜索
        async search(queryData) {
            if (this.queryData.categoryId === null) {
                await this.searchCategory();
            }
            this.loadTable("/exam/question/page", queryData)
        },

        // 默认选中学科的第一个
        searchCategory() {
            return get("/exam/category/list", {
                size: 1,
                tree: false
            })
                .then(res => {
                    this.queryData.categoryId = res[0].id
                });
        },

        //复选框
        handleSelectionChange(val) {
            this.ids = [];
            const length = val.length;
            for (let n = 0; n < length; n++) {
                this.ids.push(val[n].id);
            }
        },
        //清除试卷下拉框
        cleanPaperId() {
            delete this.paperId;
        },
        //级联考试章节
        fetchExamChapter(node, resolve) {
            const {level} = node;
            if (!node.data) {
                fetchChapterFirstStage().then(res => {
                    const nodes = Array.from(res).map(item => {
                        return {
                            value: item.id,
                            label: `${item.name}`,
                            leaf: level >= (item.children.length > 0 ? 1 : 0)
                        };
                    });
                    resolve(nodes);
                });
            } else {
                fetchChapterChildren({id: node.data.value}).then(res => {
                    const nodes = Array.from(res).map(item => {
                        return {
                            value: item.id,
                            label: `${item.name}`,
                            leaf:
                                level >=
                                (item.children.length > 0 ? level + 1 : 0)
                        };
                    });
                    resolve(nodes);
                });
            }
        },
        //级联题型
        fetchQuestionType(node, resolve) {
            const {level} = node;
            if (level === 0) {
                const nodes = Array.from(this.options).map(item => {
                    return {
                        value: item.value,
                        label: `${item.label}`,
                        leaf: false
                    };
                });
                resolve(nodes);
            } else if (level === 1) {
                fetchQuestionType({firstType: node.data.value}).then(res => {
                    const nodes = Array.from(res).map(item => {
                        return {
                            value: item.id,
                            label: `${item.viewName}`,
                            leaf: true
                        };
                    });
                    resolve(nodes);
                });
            } else {
                const nodes = null;
                resolve(nodes);
            }
        },
        //获取对应类型下试卷list
        selectPaper(id) {
            //this.cleanPaperId();
            this.queryData.paperId = "";
            this.paperOptions = [];
            if (id !== "") {
                this.paperQueryData.categoryId = id;
                fetchPaper(this.paperQueryData).then(res => {
                    for (let i = 0; i < res.records.length; i++) {
                        this.paperOptions.push({
                            value: res.records[i].id,
                            label: res.records[i].name
                        });
                    }
                });
            }
        },
        //获取对应类型下章节list
        selectChapter(id) {
            this.paperOptions = [];
            if (id !== "") {
                this.paperQueryData.categoryId = id;
                fetchPaper(this.paperQueryData).then(res => {
                    for (let i = 0; i < res.records.length; i++) {
                        this.paperOptions.push({
                            value: res.records[i].id,
                            label: res.records[i].name
                        });
                    }
                });
            }
        },
        //批量公开或隐藏
        hideList(type, data, alter, callback, errorMessage) {
            const work = () => {
                return put(`/exam/question/hide-list`, data, errorMessage)
                    .then(r => {
                        this.$message.success("设置成功");
                        if (typeof callback === "function") callback(r);
                        else this.search();
                    })
                    .catch(e => {
                        console.error("error:", e);
                        this.$message.fail("设置失败");
                    });
            };
            if (alter) {
                this.$confirm("是否批量标记为" + type + "？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        work();
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消"
                        });
                    });
            } else {
                work();
            }
        },
        filterAction(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        canUpdate(data) {
            let qtMap = {"singleChoice": 1, "multipleChoice": 2, "judgment": 3, "fill": 4, "text": 5, "combination": 6};
            let qtypeMap = {1: "单选题", 2: "多选题", 3: "判断题", 4: "填空题", 5: "问答题", 6: "复合题"};
            this.addQuestionType = qtMap[data.firstType];
            this.editQuestionText = "编辑" + qtypeMap[this.addQuestionType];
            let ds = "";
            if (this.addQuestionType !== 6) {
                if (data.answerDesc !== null) {
                    ds = this.getPublicMap(data.answerDesc)
                }
                let answer = "";
                if (this.addQuestionType === 1 || this.addQuestionType === 2) {
                    let dataOptions = data.quOption;
                    let quData = [];
                    dataOptions.map(v => {
                        let dd = {};
                        dd.name = v.option;
                        let opContent = "";
                        if (v.content.length > 0) {
                            opContent = this.getPublicMap(v.content);
                        }
                        dd.value = opContent;
                        dd.isQuill = /<[^>]*>/.test(dd.value);
                        dd.isAnswer = false;
                        if (this.addQuestionType === 2) {
                            let dAnswer = "";
                            data.answer.map(q => {
                                if (v.option === q) {
                                    dd.isAnswer = true;
                                    dAnswer += q;
                                }
                            })
                            answer = dAnswer;
                        }
                        if (this.addQuestionType === 1) {
                            if (v.option === data.answer) {
                                dd.isAnswer = true;
                            }
                        }
                        quData.push(dd)
                    })
                    this.questionListForm.heOptions = quData;
                }
                if (this.addQuestionType === 3) {
                    let htmlObj = {
                        tp: "text",
                        vl: "正确"
                    }
                    let wrongObj = {
                        tp: "text",
                        vl: "错误"
                    }
                    this.questionListForm.heOptions = [{option: 1, content: [htmlObj]}, {
                        option: 0,
                        content: [wrongObj]
                    }];
                    answer = data.answer;
                }
                if (this.addQuestionType === 4) {
                    let quData = [];
                    let qa = data.answer;
                    let fillAnswer = "";

                    qa.map(v => {
                        let da = {
                            name:"",
                            value:"",
                            isQuill:false
                        };
                        let fillContent = "";
                        if(v.vl.length > 0){
                            fillContent = this.getPublicMap(v.vl);
                            da.name = fillContent;
                            da.value = fillContent;
                            da.isQuill = /<[^>]*>/.test(da.value);
                        }
                        quData.push(da)
                        fillAnswer += da.value;
                    });
                    answer = fillAnswer;
                    this.questionListForm.fillOptions = quData;
                }
                if (this.addQuestionType === 5) {
                    let quTextContent = "";
                    if (data.answer !== null) {
                        data.answer.map(as =>{
                            quTextContent += this.getPublicMap(as.vl)
                        });
                    }
                    answer = quTextContent;
                }
                this.questionListForm.answer = answer;
                this.questionListForm.desc = ds;
            }
            // 处理题干
            let stemContent = "";
            if (data.stem !== null) {
                stemContent = this.getPublicMap(data.stem)
            }
            this.questionListForm.mainStem = stemContent;
            this.questionListForm.diffVl = data.difficulty
            this.questionListForm.id = data.id;
            this.questionListForm.score = data.score;
            this.questionListForm.typeId = data.typeId;
            this.questionListForm.sourceId = data.sourceId;
            this.questionListForm.sourceType = data.sourceType;
            this.questionListForm.categoryId = data.categoryId;
            this.findQType(this.addQuestionType);
            this.$refs.addDialog.openDialog(this.questionListForm, true)
        },
        ///
        submitEditQuestion(qForm) {
            this.editQuListDialog = false;
            let answer = "";
            let qtypeMap = {"1": "单选题", "2": "多选题", "3": "判断题", "4": "填空题", "5": "问答题", "6": "复合题"};
            let qtMap = {
                "1": "singleChoice",
                "2": "multipleChoice",
                "3": "judgment",
                "4": "fill",
                "5": "text",
                "6": "combination"
            };
            let dataForm = {
                qType: qtypeMap[this.addQuestionType],
                score: qForm.score,
                stem: qForm.mainStem,
                answerDesc: qForm.desc,
                isShow: false,
                typeId: qForm.typeId,
                diff: qForm.diffVl,
                answer: qForm.answer,
            };
            if (this.addQuestionType === 1 || this.addQuestionType === 2) {
                let multAnswer = [];
                dataForm.options = qForm.heOptions.map(v => {
                    if (v.isAnswer) {
                        if (answer !== "") {
                            answer += ","
                        }
                        answer += v.name
                        multAnswer.push(v.name);
                    }
                    let htmlObj = {
                        tp: "html",
                        vl: v.value
                    }
                    return {
                        option: v.name,
                        content: [htmlObj]
                    };
                });
                if (this.addQuestionType === 2) {
                    dataForm.answer = multAnswer;
                } else {
                    dataForm.answer = answer;
                }
            }
            if (this.addQuestionType === 3) {
                let htmlObj = {
                    tp: "html",
                    vl: "正确"
                }
                let wrongObj = {
                    tp: "html",
                    vl: "错误"
                }
                dataForm.options = [{option: 1, content: [htmlObj]}, {option: 0, content: [wrongObj]}];
            }
            if (this.addQuestionType === 4) {
                let fillAnswer = [];
                dataForm.options = qForm.fillOptions.map(v => {
                    let fData = {pt: [], vl: [{tp: "text", vl: v.value,}]}
                    fillAnswer.push(fData)
                    return {tp: ["text"]}
                });
                dataForm.answer = fillAnswer;
            }
            // 问答题
            if (this.addQuestionType === 5) {
                dataForm.options = [{tp: ["html"]}];
                let answerObjet = {
                    tp: "html",
                    vl: qForm.answer
                }
                dataForm.answer = [{pt: [], vl: [answerObjet]}];
            }
            // 封装model
            let quData = {
                firstType: qtMap[this.addQuestionType],
                knowledgePoint: "",
                difficulty: qForm.diffVl,
                sourceType: qForm.sourceType,
                knowledgeLevel: 5,
                isHide: false,
                id: qForm.id,
                score: dataForm.score,
                sourceId: qForm.sourceId,
                categoryId:qForm.categoryId
            }
            let stemHtmlObjet = {
                tp: "html",
                vl: dataForm.stem
            }
            let decsHtmlObjet = {
                tp: "html",
                vl: dataForm.answerDesc
            }
            if (this.addQuestionType !== 6) {
                quData.quOption = dataForm.options;
                quData.answer = dataForm.answer;
                quData.answerDesc = [decsHtmlObjet];
            }
            quData.stem = [stemHtmlObjet];
            quData.typeId = dataForm.typeId;
            editQuestion(quData).then(res => {
                if (res) {
                    this.$message({
                        message: "恭喜你，修改试题成功",
                        type: "success"
                    });
                    this.search();
                } else {
                    this.$message.error("错了哦，修改试题失败");
                }
            });
        },
        clickSelectAction(data, checked, indeterminate) {
            const actionCode = data.id;
            if (checked) {
                this.dataForm.actionCodes.push(actionCode);
            } else {
                this.dataForm.actionCodes.splice(
                    this.dataForm.actionCodes.indexOf(actionCode),
                );
            }
        },
        findQType(vl) {
            let qtMap = {
                "1": "singleChoice",
                "2": "multipleChoice",
                "3": "judgment",
                "4": "fill",
                "5": "text",
                "6": "combination",
                "7": "indefiniteMultipleChoice"
            };
            fetchQuestionType({firstType: qtMap[vl]}).then(res => {
                if (res) {
                    this.qTypeNameArray = res;
                }
            })
        },
        getPublicMap(mapValue) {
            let content = "";
            mapValue.map(st => {
                if (st.tp === "img") {
                    let srcStr = "https://vipcdn.langrundata.com/" + st.vl;
                    content += "<img src=\"" + srcStr + "\" />"
                } else if (st.tp === "audio") {
                    let srcStr = "https://vipcdn.langrundata.com/" + st.vl;
                    content += "<audio src=\"" + srcStr + "\" controls='controls'/>"
                } else {
                    content += st.vl;
                }
            })
            return content
        }
    }
}
;
</script>

<style lang="scss" scoped>
p {
    display: inline-table;
}

.qu-item {
    margin-left: 8px;
}

.questionInfo {
    display: flex;
}
.flexdiv{
    display: flex;
}
.questionInfo ::v-deep p {
    img {
        width: 100px;
    }

}

.test {
    width: 100%;
}
</style>
